<template>
    <div class="music">
        <!--播放全部  -->
        <div class="head">
            <div><i class="iconfont  icon-bofang1" style="color: #FE423E;"></i></div>
            <div>播放全部 <span class="textcor">({{ musicList.length }})</span></div>
            <div><i class="iconfont  icon-xiazai"></i></div>
            <div><i class="iconfont  icon-duihao2"></i></div>
        </div>
        <!-- 歌单列表 -->
        <div>
            <ul >
                <li v-for="(item ,i ) in musicList" :key="item.id" class="musicitem" @click="selectMusic(i)">
                    <div class="textcor">{{ i+1 }}</div>
                    <div class="main">
                        <div >{{ item.name }}</div>
                        <div>
                            <span class="tu">SQ</span>
                            <span class="textcor">{{item.al.name}}</span>
                        </div>
                    </div>
                    <div><i class="iconfont icon-bofang" style="color: #B6B6B6;"></i></div>
                    <div><i class="iconfont icon-gengduo-shuxiang" style="color: #B6B6B6;"></i></div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
import { mapMutations,mapState } from 'vuex'
export default {
    name:'musiclist',
    props:['musicList'],
    data() {
        return {

        };
    },
    computed:{
        ...mapState('playcontroller' ,['controlList'])
    },
    methods:{
        ...mapMutations('playcontroller',['setControlList','setCurrentMusic' ]),
        // 选中列表的音乐  将当前列表存到 vuex的播放列表中 激活当前的歌曲
        selectMusic(i){
            let tru = this.musicList.toString() == this.controlList.toString()
            // 如果是原列表  就不传送列表 只修改激活的歌曲
            if( !tru ){
                this.setControlList(this.musicList)
            }
            // 设置 vuex中播放的是那一首歌
            this.setCurrentMusic(i)
        }
    }
};
</script>

<style scoped lang="scss">
.music{
    padding: .1rem .2rem;
    font-size: .18rem;
    margin-bottom: .5rem;
    .head{
        display: flex;
        padding: .2rem 0rem;
        div{
            padding: 0rem .1rem;
        }
        div:nth-child(2){
            flex: 1;
            padding: 0rem;
            
        }
      
    }
   
    .musicitem{
        display: flex;
        align-items: center;
        margin: .2rem 0rem;
        div{
            padding: 0rem .1rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .main{
            flex: 1;
            padding: 0rem;
            div:nth-child(2){
                margin-top: .05rem;
            }
            .tu{
                color: #FC4B3B;
                border: 1px solid #E8E3E3;
                padding: 0rem .02rem;
                margin-right: .05rem;
                border-radius: 20%;
                font-size: .13rem;
            }
        }
    }
    .iconfont{
        font-size: .3rem;
    }
    .textcor{
        color: #A0A0A0;
        font-size: .15rem;
    }
}


</style>
